<template>
  <div>
    <!-- 阿里云视频播放器样式 -->
    <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.9.3/skins/default/aliplayer-min.css">
    <!-- 阿里云视频播放器脚本 -->
    <script charset="utf-8" src="https://g.alicdn.com/de/prismplayer/2.9.3/aliplayer-min.js"/>
    <!-- 阿里云视频播放器组件 -->
    <script charset="utf-8" src="https://player.alicdn.com/aliplayer/presentation/js/aliplayercomponents.min.js"/>
    <!-- 播放器 -->
    <div id="J_prismPlayer" class="prism-player" style="height: 656px;width: 80%;margin: 20px auto;"/>
  </div>
</template>

<script>
import videoApi from '~/api/video'

export default {
  async asyncData(page) {
    // 得到视频id
    const videoSourceId = page.route.params.vid
    // 根据视频id获取播放凭证
    const response = await videoApi.getPlayAuth(videoSourceId)
    return {
      videoSourceId,
      playAuth: response.data.playAuth
    }
  },
  // 页面渲染之后执行
  mounted() {
    /* eslint-disable no-undef */
    new Aliplayer({
      id: 'J_prismPlayer',
      vid: this.videoSourceId,
      playauth: this.playAuth
    }, function(player) {
      console.log('播放器创建完成')
    })
  }
}
</script>
